<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>用户信息</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <el-form ref="userform" :model="userform" label-width="100px" class="el-form" :rules="rules">
      <el-form-item label="登录名称">
        <el-input v-model="userform.username" disabled></el-input>
      </el-form-item>

      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="userform.nickname"></el-input>
      </el-form-item>

      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="userform.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="resetFn">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { Message } from 'element-ui'
import {updateUserInfoAPI} from "@/api"
  export default{
    name:"UserInfo",
    data(){
      return{
        userform:{
            id:"",
            username:this.$store.state.userInfo.username,
            email:"",
            nickname:"",
            user_pic:""
        },
        rules:{
          nickname:[
            {required:true,message:"昵称为必填项",trigger:'blur'},
            {pattern:/^\S{1,10}$/,message:"昵称必须为1-10位的非空字符",trigger:'blur'}
          ],
          email:[
            {required:true,message:"邮箱为必填项",trigger:'blur'},
            {type:"email",Message:'邮箱格式不正确',trigger:'blur'}
          ]
        }
      }
    },
    methods:{
      onSubmit(){
          //js兜底校验
          this.$refs.userform.validate(async valid =>{
            if(valid){//验证成功
              console.log(this.userform)
              this.userform.id=this.$store.state.userInfo.id
              const {data:res}=await updateUserInfoAPI(this.userform)
              if(res.code!==0){
                  return this.$message.error("用户信息更新失败")
              }
              this.$message.success("用户信息更新成功")
              this.$store.commit("updateUserInfo",this.userform)
            }else{
              return false
            }
          })
      },
      resetFn(){
        this.$refs.userform.resetFields()
      }
    }
  }
</script>

<style scoped lang="less">
    .el-form{
      width: 500px;
    }
</style>
